<template>
  <h1 class="mod-title">
    <span
      :class="PayInfo.type == 'wx' ? 'ico_log ico-3' : 'ico_log ico-4'"
    ></span>
  </h1>

  <div class="mod-ct">
    <div class="order"></div>

    <div style="margin-top: 10px">
      <span style="color: red"
        >提示：付款金额要与显示的金额一致，否则后果自负</span
      >
    </div>

    <div class="amount" id="money">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span
        id="copyText"
        class="amount2"
        >{{ PayInfo.price }}</span
      >元
      <span @click="OnCopy" style="font-size: 10px; color: darkcyan"
        >&nbsp;&nbsp;复制金额</span
      >
    </div>

    <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
      <div data-role="qrPayImg" class="qrcode-img-area">
        <div
          class="ui-loading qrcode-loading"
          data-role="qrPayImgLoading"
          style="display: none"
        ></div>
        <div style="position: relative; display: inline-block">
          <img
            id="imgCode"
            :src="PayInfo.wxcode"
            style="width: 220px"
            v-if="PayInfo.type === 'wx'"
          />

          <img
            id="imgCode"
            :src="PayInfo.zfbcode"
            style="width: 220px"
            v-else-if="PayInfo.type === 'zfb'"
          />
        </div>
      </div>
    </div>

    <div class="time-item" style="padding-top: 10px">
      <div class="time-item" id="msg">
        <h1 class="overtime">订单名称：{{ PayInfo.name }}<span></span></h1>
      </div>

      <div class="time-item">
        <h1>
          订单号:<span data-payid="">{{ PayInfo.code }}</span>
        </h1>
        <input type="hidden" :value="PayInfo.id" id="payid" />
      </div>

      <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
      <strong id="minute_show">0分</strong>
      <strong id="second_show">0秒</strong>
      <div class="time-item"></div>
    </div>

    <div class="tip">
      <div class="ico-scan"></div>
      <div class="tip-text">
        <p id="showtext" v-if="PayInfo.type === 'wx'">打开微信[扫一扫]</p>
        <p id="showtext" v-else-if="PayInfo.type === 'zfb'">
          打开支付宝[扫一扫]
        </p>
      </div>
    </div>

    <!--[if IE 8]>
      <div class="tip-text" style="color: #ff0000">
        您的浏览器版本较低，请升级后再试！
      </div>
    <![endif]-->
  </div>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 获取地址栏的payid
const payid = ref(proxy.$route.query.payid ?? 0);
const MaxTime = ref(3 * 60); // 默认多少时间关闭当前页面
const PayInfo = ref({}); // 支付订单数据
const timers = ref(null); // 倒计时定时器
const interval = ref(null); // 轮询订单状态定时器

// 挂载前钩子
onMounted(() => {
  GetPayInfo();
});

// 获取支付订单详情
const GetPayInfo = async () => {
  let params = {
    payid: payid.value,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/pay/info",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    PayInfo.value = result.data;
    // 计时器
    timers.value = setInterval(CountDown, 1000);
    interval.value = setInterval(GetStatus, 1000);
  } else {
    proxy.$fail({
      message: result.msg,
      onClose: () => {
        proxy.$router.back();
      },
    });
  }
};

// 复制金额
const OnCopy = () => {
  let text = document.getElementById("copyText").innerText;
  let input = document.createElement("input");
  input.setAttribute("id", "copyInput");
  input.setAttribute("value", text);
  document.getElementsByTagName("body")[0].appendChild(input);
  document.getElementById("copyInput").select();
  document.execCommand("copy");
  proxy.$success("已复制金额");
  document.getElementById("copyInput").remove();
};

// 倒计时
const CountDown = () => {
  if (MaxTime.value >= 0) {
    let minutes = Math.floor(MaxTime.value / 60);
    let seconds = Math.floor(MaxTime.value % 60);
    document.getElementById("minute_show").innerText = minutes + "分";
    document.getElementById("second_show").innerText = seconds + "秒";
    --MaxTime.value;
  } else {
    clearInterval(timers.value);
    clearInterval(interval.value);
    document.getElementById("imgCode").src =
      "/assets/pay/images/qrcode_timeout.png";
    // 倒计时完毕 订单失效
    proxy
      .$showDialog({
        title: "支付提示",
        message: "订单已失效",
      })
      .then(() => {
        proxy.$router.back();
      });
  }
};

// 轮询获取订单状态
const GetStatus = async () => {
  // 组装参数
  let params = {
    payid: payid.value,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/pay/status",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    proxy
      .$showDialog({
        title: "支付提示",
        message: "支付成功",
      })
      .then(() => {
        // 兼容购买商品跳转到订单详情
        if (result.data.jump.includes("?") === true) {
          // path 路径 queryString 参数
          let [path, queryString] = result.data.jump.split("?");
          // 存放重组后的参数
          let query = {};
          // 参数存在就进入if
          if (queryString) {
            // 遍历参数
            queryString.split("&").forEach((param) => {
              let [key, value] = param.split("=");
              query[key] = isNaN(value) ? value : Number(value);
            });
          }

          // 先判断商品立即购买在本地存储当中是否存在缓存,如果有缓存就删除缓存
          let cart =
            Object.getOwnPropertyNames(proxy.$cart.value).length > 0
              ? proxy.$cart.value
              : [];
          if (cart.length > 0) {
            // 清空本地缓存，立即购买的缓存
            proxy.$cart.value = {};
          }
          // 购物的跳转
          proxy.$router.push({ path, query, replace: true });
        } else {
          // 充值的跳转
          proxy.$router.push({ path: result.data.jump, replace: true });
        }
      });
  } else {
    if (result.msg === "支付订单不存在") {
      proxy.$fail({
        message: result.msg,
        onClose: () => {
          proxy.$router.back();
        },
      });
    }
  }
};

// 结束挂载前
onBeforeUnmount(() => {
  clearInterval(timers.value);
  clearInterval(interval.value);
});
</script>

<style scoped>
@import url("/assets/css/cashier.css");
</style>